<template>
  <div>
    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column
        v-loading="loading"
        align="center"
        label="ID"
        width="65"
        element-loading-text="请给我点时间！"
        prop="id"
      />
      <template v-if="type === '1'">
        <el-table-column prop="pg_num" align="center" label="瓶盖编号" />
        <el-table-column prop="pg_yw" align="center" label="瓶盖有无" />
        <el-table-column prop="pg_xx" align="center" label="瓶盖信息" />
        <el-table-column prop="pg_ps" align="center" label="瓶盖破损" />
        <el-table-column prop="pg_ys" align="center" label="瓶盖颜色" />
        <el-table-column prop="pg_bp" align="center" label="瓶盖不平" />
      </template>
      <template v-if="type === '2'">
        <el-table-column align="center" label="液位过高" prop="yt_gg" />
        <el-table-column align="center" label="液位过低" prop="yt_gd" />
      </template>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import { getPg } from '@/api/data'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  props: {
    type: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      list: null,
      listQuery: {
        status: this.type,
        page: 1,
        limit: 10
      },
      total: 200,
      loading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      getPg(this.listQuery).then(res => {
        this.list = res.result.data
        this.total = res.result.total
        this.loading = false
      })
    }
  }
}
</script>

